<template>
  <div class="app-container">
    <!-- 公共顶部 -->
    <large-screen-header />
    <!-- 主体部分 -->
    <div class="app-main">
      <!-- 左侧 -->
      <div class="app-left">
        <div class="app-left-total">
          全国设定地震个数
          <span>
            <i v-for="item in totalArr" :key="item">{{ item }}</i>
          </span>
        </div>
        <div class="app-left-item">
          <!-- 次级标题 -->
          <!-- <subheadings :name="'各省（直辖市）设定地震个数统计'" /> -->
          <!-- <CollapsibleTable :name="'各省（直辖市）设定地震个数统计'" /> -->
        </div>
        <div class="app-left-item">
          <subheadings :name="'自2015年以来破坏性地震验证情况统计'" />
          <earthquake />
        </div>
        <div class="app-left-item">
          <subheadings :name="'设定地震个数增长趋势图'" />
          <ColumnLineChart />
        </div>
      </div>
      <!-- 中心部分 -->
      <div class="app-center">
        <!-- 标题 -->
        <headline :name="'全国设定地震灾害损失分布图'" />
        <!-- 地图 -->
        <div class="app-map">
          <!-- <IndexMap></IndexMap> -->
          <OlMap ref="olmapRef" style="height: 100%" @getMap="getMap" @mapClick="mapClick"></OlMap>
          <select-legend
            style="position: absolute; bottom: 20%"
            :column1Title="'图例'"
            :column2Title="'设定烈度'"
            :column3Title="'四个概率水准'"
            :legendItems="legendItems"
            :options1="options1"
            :options2="options2"
            @optionSelected="handleOptionSelected"
          ></select-legend>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="app-right">
        <div class="app-right-item">
          <subheadings :name="'设定地震灾害损失评估成果'" />
          <LossAssessment />
        </div>
        <div class="app-right-item">
          <subheadings :name="'现场抽样复核情况'" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import earthquake from '@/views/disasterLosses/components/earthquake.vue';
import ColumnLineChart from '@/views/disasterLosses/components/ColumnLineChart.vue';
// import CollapsibleTable from '@/views/disasterLosses/components/CollapsibleTable.vue';
import LossAssessment from '@/views/disasterLosses/components/LossAssessment.vue';
import OlMap from '@/components/Olmap';
import { Style, Circle as CircleStyle, Fill, Stroke, Icon, Text } from 'ol/style';
import Feature from 'ol/Feature';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
// start
import { GeoJSON as GeoJSonFormat } from 'ol/format';
import SelectLegend from '@/components/SelectLegend';
import { getChinaBaseMap } from '@/map/projMap.js';
// end

// 地震个数统计
let totalNum = '1024';
const totalArr = ref([]);

totalArr.value = Array.from(totalNum);
// start
const mapInstance = ref(null);
const provinceLayer = ref(null);
const olmapRef = ref(null);
const legendItems = [
  { color: '#FFC95D', label: 'I级' },
  { color: '#FFB624', label: 'II级' },
  { color: '#FF9100', label: 'III级' },
  { color: '#FF6600', label: 'IV级' },
  { color: '#FF4D00', label: 'V级' },
  // ...
];
const options1 = [
  { value: '0', label: 'VI' },
  { value: '1', label: 'VII' },
  { value: '2', label: 'VIII' },
  { value: '3', label: 'IX' },
  // ...
];
const options2 = [
  { value: '0', label: '50年内超越概率63%' },
  { value: '1', label: '50年内超越概率10%' },
  { value: '2', label: '50年内超越概率0%' },
  { value: '3', label: '100年内超越概率1%' },
  // ...
];

const handleOptionSelected = (selectedOption1, selectedOption2) => {
  // 在这里处理选项选择后的操作，比如将选择的选项存储到 data 中
  // 或执行其他逻辑
};
// 随机颜色列表
const randomColors = [
  'rgba(255, 201, 93, 1)',
  'rgba(255, 182, 36, 1)',
  'rgba(255, 77, 0, 1)',
  'rgba(255, 102, 0, 1)',
  'rgba(255, 145, 0, 1)',
];

const getMap = (map) => {
  mapInstance.value = map.value;
  console.log('jjj', mapInstance.value);
  //   假数据
  createProvinceLayer();
  // addProvinceNameLayer();
};
const mapClick = (event) => {
  const clickedFeature = mapInstance.value.forEachFeatureAtPixel(event.pixel, (feature) => feature);
  console.log('click', clickedFeature.get('name'));
  if (clickedFeature) {
    // 获取点击的省份边界
    const provinceGeometry = clickedFeature.getGeometry();

    // 移除或隐藏其他省份图层
    mapInstance.value.getLayers().forEach((layer) => {
      // if (layer !== provinceLayer.value) {
      if (layer.get('id') !== 'province') {
        // mapInstance.value.removeLayer(layer);
        layer.setVisible(false);
      } else {
        console.log('layer---', layer.getSource().getFeatures());
        layer
          .getSource()
          .getFeatures()
          .forEach((feature) => {
            console.log('-----', clickedFeature.get('name'), feature.get('name'));
            if (clickedFeature.get('name') !== feature.get('name')) {
              feature.setStyle(null);
            }
          });
      }
    });
    // 创建新的省份图层并添加到地图
    const newProvinceLayer = new VectorLayer({
      source: new VectorSource({
        features: [new Feature(provinceGeometry)],
      }),
      zIndex: 2,
      style: new Style({
        stroke: new Stroke({
          color: 'blue',
          width: 2,
        }),
        fill: new Fill({
          color: 'black',
        }),
      }),
    });
    mapInstance.value.addLayer(newProvinceLayer);
    // 计算放大后的视图范围
    const provinceExtent = provinceGeometry.getExtent();
    // 更新地图视图以显示具体的省份地图
    mapInstance.value.getView().fit(provinceExtent, { padding: [20, 20, 20, 20], duration: 1000 }); // 1000毫秒的动画效果
  }
};
function addProvinceNameLayer() {
  const geojsonSource = new VectorSource({
    url: getChinaBaseMap,
    format: new GeoJSonFormat(),
  });

  // 创建省份名称文本图层
  const textLayer = new VectorLayer({
    source: geojsonSource,
    zIndex: 2,
    style: function (feature) {
      const textstyle = new Style({
        text: new Text({
          font: '10px Calibri,sans-serif',
          fill: new Fill({ color: '#fff' }),
          text: feature.get('name'),
        }),
      });
      return textstyle;
    },
  });

  mapInstance.value.addLayer(textLayer);
}

// 创建省份样式的函数
const createProvinceStyle = (feature) => {
  const randomColor = randomColors[Math.floor(Math.random() * randomColors.length)];
  return new Style({
    fill: new Fill({ color: randomColor }),
    stroke: new Stroke({ color: 'green', width: 1 }),
    text: new Text({
      font: '10px Calibri,sans-serif',
      fill: new Fill({ color: '#fff' }),
      text: feature.get('name'),
    }),
  });
};
// 创建图层的函数
const createProvinceLayer = () => {
  const geojsonSource = new VectorSource({
    url: getChinaBaseMap, // 替换为你的 GeoJSON 数据源路径
    format: new GeoJSonFormat(),
  });

  provinceLayer.value = new VectorLayer({
    source: geojsonSource,
    zIndex: 1,
    id: 'province',
    style: function (feature) {
      return createProvinceStyle(feature);
    },
  });
  mapInstance.value.addLayer(provinceLayer.value);
};
// end
</script>

<style scoped lang="scss">
.app-main {
  display: flex;
  justify-content: space-between;

  .app-left {
    margin-left: 30px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 40px);
    width: 450px;
    &-total {
      width: 450px;
      height: 80px;
      background-size: 100% 100%;
      background-image: url('../../assets/images/losses/title.png');
      font-size: 22px;
      color: #46ffff;
      line-height: 80px;
      padding-left: 120px;
      box-sizing: border-box;
      display: flex;
      position: absolute;
      top: 100px;
      span {
        font-family: DS-Digital;
        font-weight: 600;
        font-size: 36px;
        padding-top: 22px;
        display: flex;
        margin-left: 8px;
        i {
          display: block;
          width: 26px;
          height: 36px;
          background: #004c86;
          margin: 0 2px;
          font-style: normal;
          line-height: 36px;
          text-align: center;
        }
      }
    }

    &-item {
      width: 450px;
      background: linear-gradient(
        135deg,
        rgba(0, 3, 45, 0.85) 0%,
        rgba(0, 12, 88, 0.85) 50%,
        rgba(0, 3, 45, 0.85) 100%
      );
      position: relative;
      position: absolute;
      &::after {
        content: '';
        display: block;
        width: 450px;
        height: 50px;
        background-size: 100% 100%;
        background-image: url('../../assets/images/common/bg_bottom.png') !important;
        position: absolute;
        bottom: -10px;
      }
      &:nth-child(2) {
        height: 220px;
        top: 200px;
        z-index: 10;
      }
      &:nth-child(3) {
        height: 300px;
        top: 430px;
      }
      &:nth-child(4) {
        height: 296px;
        top: 736px;
      }
    }
  }

  .app-map {
    width: 960px;
    height: 100%;
    overflow: hidden; //test
    position: relative;
  }
  .app-right {
    margin-right: 30px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 40px);
    width: 450px;

    &-item {
      width: 450px;
      height: 460px;
      background: linear-gradient(
        135deg,
        rgba(0, 3, 45, 0.85) 0%,
        rgba(0, 12, 88, 0.85) 50%,
        rgba(0, 3, 45, 0.85) 100%
      );
      position: relative;
      &::after {
        content: '';
        display: block;
        width: 450px;
        height: 50px;
        background-size: 100% 100%;
        background-image: url('../../assets/images/common/bg_bottom.png') !important;
        position: absolute;
        bottom: -10px;
      }
      &:nth-child(2) {
        height: 455px;
      }
    }
  }
}
/* start */
.popup-bg {
  width: 400px;
  height: 275px;
  background: linear-gradient(NaNdeg, rgba(5, 12, 53, 0.8) 0%, rgba(4, 16, 89, 0.8) 55%, rgba(6, 40, 150, 0.8) 100%);
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 2px solid #0190f9;
  display: flex;
  padding: 17px 15px;
  flex-direction: column;
  .popup-head {
    justify-content: center;

    display: flex;
    flex-direction: row;
    font-size: 18px;
    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
    font-weight: bold;
    color: #ffffff;
    line-height: 23px;
    .popup-head-title {
      margin-left: auto;
    }
    .popup-head-x {
      margin-left: auto;
      width: 12px;
      height: 12px;
      color: #e6f4fd;
      opacity: 1;
    }
  }
  .popup-content {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
    font-weight: 500;
    color: #e6f4fd;
    line-height: 23px;
    .popup-content-title {
      background: #050426;
      border-radius: 0px 0px 0px 0px;
      opacity: 0.5;
      padding: 10px 34px;
      justify-content: space-between;
      display: flex;
      flex-direction: row;
    }
    .popup-table {
      .el-table {
        width: 270px;
        max-height: 150px;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 99;
        position: absolute;
        // top: 70px;
        // background-color: #00032D;
        /* background: linear-gradient(135deg, #00032d 0%, #000c58 50%, #00032d 100%); */
        :deep(.el-table__header) {
          background: rgba(5, 4, 38, 0.4);
        }

        :deep(.el-table__row) {
          background: rgba(5, 4, 38, 0.4);
        }
      }
    }
  }
}

/* end */
</style>
